<template>
	<view class="member_box" :style="'height: 100vh;'">
		<!-- 'padding-top:' + (navTop * 2 - 6) + 'rpx; -->
		<view :style="'height:80rpx;'"></view>
		<view class="pr">
			<image style="width:100%" :src="getImgSrc('/uploads/20250228/174074897967c1b8b3ee371.jpg')" mode="widthFix">
			</image>
			<view class="introduce_top ac f14">
				<view class="my_order cf mr15" @click="goPage('/pages/recharge/myOrder')" v-if="platform == 'android'">
					我的订单</view>
				<view class="introduce_text f13" @click="goPage('/pages/about/about','13')"
					:style="'background-image:url('+ getImgSrc('/uploads/20241212/1733968725675a4355a2bfa.png') +')'">
					<!-- 会员权益介绍 -->
				</view>
			</view>
		</view>
<!-- 		<view v-if="!timeout">
			<view
				style="display:flex;flex-direction: column;align-items: center;color:rgb(253,245,223);margin-bottom:30rpx">
				<view style="font-size:38rpx;font-weight:bold;margin-bottom:10rpx">恢复原价倒计时</view>
				<view style="margin-bottom:10rpx">
					<text style="color:rgb(180,28,24);">{{day}}</text>天<text style="color:rgb(180,28,24);">{{hour}}</text>小时<text style="color:rgb(180,28,24);">{{minute}}</text>分<text style="color:rgb(180,28,24);">{{second}}</text>秒
				</view>
				<view style="font-size:26rpx">限时优惠价(2025年2月28日截止)</view>
			</view>
			<view class="vip_list df fw">
				<view class="vip_item mr20 pr" v-for="(item,index) in list" :key="item.id" @click="changSel(index)">
					<image style="width:100%" :src="getImgSrc('/uploads/20241212/1733968761675a43798c51f.png')"
						mode="widthFix"></image>
					<view class="content_vip" :style="{border:select_index === index ? '8rpx solid #BE9D72' : ''}">
						<view class="f20 f500">￥{{index==0?'16800':'25200'}}{{ item.title }}</view>
						<view
							style="font-size:24rpx;color:rgb(180,28,24); text-decoration: line-through;text-decoration-color: #999">
							&nbsp;原价:&nbsp;&nbsp;￥{{index==0?'19800':'29700'}}&nbsp;</view>
					</view>
				</view>
				<view style="height: 420rpx;" v-if="list && list.length != 0 && platform == 'android'"></view>
			</view>
		</view> -->
		<view>
		<!-- 	<view class="vip_item mr20 pr" v-for="(item,index) in list" :key="item.id" @click="changSel(index)">
				<image style="width:100%" :src="getImgSrc('/uploads/20241212/1733968761675a43798c51f.png')"
					mode="widthFix"></image>
				<view class="content_vip" :style="{border:select_index === index ? '8rpx solid #BE9D72' : ''}">
					<view class="f16 f500">{{ item.title }}</view>
					<view class="f20 f500">￥{{ item.price }}</view>
				</view>
			</view> -->
			<view class="vip_list df fw" style="display:flex; justify-content: space-between;flex:1">
				<view class="vip_item mr20 pr" v-for="(item,index) in list" :key="item.id" @click="changSel(index)">
					<image style="width:100%" :src="getImgSrc('/uploads/20241212/1733968761675a43798c51f.png')"
						mode="widthFix"></image>
					<view class="content_vip" :style="{border:select_index === index ? '8rpx solid #BE9D72' : ''}">
						<view class="f20 f500" style="font-weight:700">{{ item.title}}</view>
						<view class="f18 f500" style="margin-top:4rpx">￥{{item.price}}/年</view>
					</view>
				</view>
			</view>
			<view style="height: 320rpx;" v-if="list && list.length != 0 && platform == 'android'"></view>
		</view>
		<!-- <p class="f13 mt8 cf db"> <text class="cf5 mr5">*</text> 可开具增值税专用发票，付款后请联系客服提供开票资料索取 </p> -->
		<!-- <h2 class="f14 cf mt10 f500 db tc">《会员协议》</h2> -->

		<!-- :style="'bottom:' + bottom + 'rpx;'" -->
		<!-- android -->
		<view class="fixed_btn" :style="'bottom:0rpx;'" v-if="platform == 'android'">
			<view class="open_box df sb ac">
				<view class="vip_all_price" style="font-weight: bold;">￥ <text class="f20 f500"
						style="font-weight: bold;">{{list[select_index].price}}</text></view>
				<view class="open_btn df ac jc f18" @click="goPay">
					<image style="width:100%;max-height: 101rpx;"
						:src="getImgSrc('/uploads/20241212/1733968788675a439476c00.png')" mode="widthFix"></image>
				</view>
			</view>
			<h2 class="f14 cf mt10 f500 db tc" style="text-decoration: underline;"
				@click="goPage('/pages/about/about','11')">《会员协议》</h2>
			<view class="f12 mt5 cf df ac jc mt8">
				<image :src="getImgSrc('/uploads/20240930/172768569366fa643d17a0b.png')" class="img16 mr5"></image>
				沪公网安备31011502018514号 | 沪ICP备2020029919号
			</view>
		</view>

		<!-- ios -->
		<view v-else style="padding-bottom: 40rpx;" class="mt10">
			<image style="width: 280rpx;display: block;margin: 0rpx auto;" :show-menu-by-longpress="true"
				:src="getImgSrc('/uploads/20240930/172768617266fa661c80124.png')" mode="widthFix" />
			<view class="tc mt5 cf">
				长按识别二维码，添加企业微信办理
			</view>
			<h2 class="f14 cf mt10 f500 db tc" style="text-decoration: underline;"
				@click="goPage('/pages/about/about','11')">《会员协议》</h2>
			<view class="f12 mt5 cf df ac jc mt8">
				<image :src="getImgSrc('/uploads/20240930/172768569366fa643d17a0b.png')" class="img16 mr5"></image>
				沪公网安备31011502018514号 | 沪ICP备2020029919号
			</view>
		</view>

		<van-popup :show="is_operate" round @close="is_operate = false">
			<p class="df ac jc pd200 mt5 w311">
				<span class="f16 c28 f500">开通会员请联系主账号</span>
			</p>
			<p class='df ac jc btf1 f16 c10 h48' @tap="is_operate = false">我知道了</p>
		</van-popup>
	</view>
</template>

<script>
	import day from "../../utils/day.js"
	import http from '../../utils/http';
	const app = getApp();
	export default {
		data() {
			return {
				is_operate: false,
				navTop: 0,
				platform: 'android',
				select_index: 0,
				vipPackage: [{
					type: '超级会员',
					time: '一年',
					price: 16800,
					package: [{
						name: '工厂地图排名靠前',
						is_enjoy: true
					}, {
						name: '搜索排名靠前',
						is_enjoy: true
					}, {
						name: '首页工厂推荐',
						is_enjoy: true
					}, {
						name: '地图展示',
						is_enjoy: true
					}, {
						name: '抖音/腾讯广告展示',
						is_enjoy: true
					}, {
						name: '在线接受询价',
						is_enjoy: true
					}, {
						name: '主页挂载电话',
						is_enjoy: true
					}, {
						name: '查看采购信息无限制',
						is_enjoy: true
					}, {
						name: '订单报价无限制',
						is_enjoy: true
					}, {
						name: '产品数量无限制',
						is_enjoy: true
					}, {
						name: '专属运营助理',
						is_enjoy: true
					}, {
						name: '客服优先服务',
						is_enjoy: true
					}, {
						name: '查看图纸无水印',
						is_enjoy: true
					}, {
						name: '5个子账号',
						is_enjoy: true
					}, {
						name: '推荐邀请报价',
						is_enjoy: true
					}, {
						name: '超级会员标识',
						is_enjoy: true
					}]
				}, {
					type: '基础会员',
					time: '一年',
					price: 6800,
					package: [{
						name: '工厂地图排名靠前',
						is_enjoy: false
					}, {
						name: '搜索排名靠前',
						is_enjoy: false
					}, {
						name: '首页工厂推荐',
						is_enjoy: false
					}, {
						name: '地图展示',
						is_enjoy: true
					}, {
						name: '抖音/腾讯广告展示',
						is_enjoy: false
					}, {
						name: '在线接受询价',
						is_enjoy: false
					}, {
						name: '主页挂载电话',
						is_enjoy: true
					}, {
						name: '查看采购信息无限制',
						is_enjoy: true
					}, {
						name: '订单报价无限制',
						is_enjoy: false
					}, {
						name: '产品数量无限制',
						is_enjoy: false
					}, {
						name: '专属运营助理',
						is_enjoy: true
					}, {
						name: '客服优先服务',
						is_enjoy: true
					}, {
						name: '查看图纸无水印',
						is_enjoy: true
					}, {
						name: '2个子账号',
						is_enjoy: false
					}, {
						name: '推荐邀请报价',
						is_enjoy: false
					}, {
						name: '超级会员标识',
						is_enjoy: false
					}]
				}],
				bottom: this.getPadBottomStyle(),
				list: [],
				user_type: 0,
				day: 0, //天
				hour: 0, //小时
				minute: 0, //分钟
				second: 0, //秒
				timeout: true, //是否超过目标时间
				targetTime: "2025-03-01 00:00:00", //目标时间
				callBack: null
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// this.callBack = setInterval(() => {
			// 	this.updateCountdown()
			// }, 1000)
			this.setData({
				navTop: app.globalData.navTop
			});
			this.checkPlatform()
			console.log(this.vipPackage)
			this.user_type = options.user_type

			http.request('base/vipList')
				.then((res) => {
					res.data.forEach(item => {
						this.list.push({
							...item,
							package: item.type === 1 ? this.vipPackage[1].package : this.vipPackage[0]
								.package
						})
					})
					console.log(this.list)
				})
				.catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
		},
		onUnload() {
			clearInterval(this.callBack)
		},
		beforeDestroy() {
				console.log(123123)
			clearInterval(this.callBack)
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			// 获取倒计时
			updateCountdown() {
				let start = day(new Date()); //获取开始时间
				let end = day(this.targetTime); //结束时间
				let diff = end.diff(start); //时间差
				var timediff = Math.round(diff / 1000);
				if (timediff <= 0) {
					this.timeout = true
					clearInterval(this.callBack)
				} else {
					if (this.timeout) {
						this.timeout = false
					}
				}
				this.day = parseInt(timediff / 3600 / 24);
				this.hour = this.timerFilter(parseInt((timediff / 3600) % 24));
				this.minute = this.timerFilter(parseInt((timediff / 60) % 60));
				this.second = this.timerFilter(timediff % 60);
				//输出还剩多少时间
				console.log(this.day + "天" + this.hour + "时" + this.minute + "分" + this.second + "秒")
			},
			timerFilter(params) {
				if (params - 0 < 10) {
					return "0" + params;
				} else {
					return params;
				}
			},
			checkPlatform() {
				const platform = uni.getSystemInfoSync().platform
				console.log(platform)
				platform == 'ios' ? this.platform = 'ios' : this.platform
				// console.log(this.platform)
			},
			getPadBottomStyle() {
				const systemInfo = uni.getSystemInfoSync();
				return systemInfo.screenHeight - systemInfo.safeArea.bottom;
			},
			changSel(index) {
				if (this.select_index === index) return

				this.select_index = index
			},
			goPay() {
				if (this.user_type == 1) {
					this.is_operate = true
					return
				}
				const data = {
					vip_id: this.list[this.select_index].id
				}
				http.request('user/vipRecharge', data).then((res) => {
					console.log(res);
					const info = res.data.wechatPay;
					uni.requestPayment({
						timeStamp: info.timeStamp,
						nonceStr: info.nonceStr,
						package: info.package,
						signType: info.signType,
						paySign: info.sign,
						success: (res) => {
							uni.showModal({
								title: '充值成功',
								content: '恭喜您成为夕腾外协会员供应商',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										uni.navigateBack({
											delta: 1
										});
									}
								}
							});
						},
						fail: (res) => {
							console.log(res);
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
						}
					})
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
			},
			goPage(url, type) {
				uni.navigateTo({
					url: type ? `${url}?type=${type}` : url,
				})
			}
		}
	};
</script>
<style>
	@import './recharge.css';

	.member_title {
		background-image: -webkit-linear-gradient(bottom, #FED398, #FFD398, #FED39A);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.select_vip_box {}

	.member_box::after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		/* background-image: url('https://cdn.xtwaixie.com/uploads/20240930/172767554766fa3c9b1cd80.jpg'); */
		background: #040C19;
		background-size: 100% 100%;
		z-index: -1;
	}
</style>